<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--侧边部门数据-->
      <!--      <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">-->
      <el-col :xs="10" :sm="6" :md="5" :lg="4" :xl="4">
        <div class="head-container">
          <el-input
            clearable
            size="small"
            style="width: 200px"
            placeholder="输入人员名称搜索"
            prefix-icon="el-icon-search"
            class="filter-item"
          />
        </div>
        <el-table
          :data="allUsers"
          style="width: 100%"
          @row-click="clickTr"
        >
          <el-table-column
            prop="username"
            label="选择人员"
            width="300"
          />
        </el-table>
        <!--        <pagination />-->
      </el-col>
      <!--用户数据-->
      <!--      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">-->
      <el-col :xs="14" :sm="18" :md="19" :lg="20" :xl="12">
        <!--工具栏-->
        <div class="head-container">
          <!-- v-if="crud.props.searchToggle"-->
          <div>
            <!-- 搜索 -->
            <label class="el-form-item-label">任务名</label>
            <el-input v-model="query.taskName" clearable placeholder="任务名" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
            <!--            <label class="el-form-item-label">file_list中所含有的图片数量</label>-->
            <!--            <el-input v-model="query.numImage" clearable placeholder="file_list中所含有的图片数量" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
            <rrOperation :crud="crud" />
          </div>
          <!--          <crudOperation show="" :permission="permission" />-->
        </div>
        <!--表单渲染-->
        <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
            <el-form-item label="任务名">
              <el-input v-model="form.taskName" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="分配到的文件路径">
              <el-input v-model="form.fileList" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="file_list中所含有的图片数量">
              <el-input v-model="form.numImage" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="已完成的图片数量">
              <el-input v-model="form.numFinish" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="创建任务的时间">
              <el-input v-model="form.createTime" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="完成时间">
              <el-input v-model="form.finishTime" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="已审核通过的图片数量">
              <el-input v-model="form.numChecked" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="0未完成/1完成部分/2等待审核/3审核通过/4审核不通过">
              未设置字典，请手动设置 Radio
            </el-form-item>
            <el-form-item label="markTaskId">
              <el-input v-model="form.markTaskId" style="width: 370px;" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="allTaskMarks" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="taskName" label="任务名" />
          <el-table-column prop="fileList" label="分配到的文件路径" />
          <el-table-column prop="numImage" label="图片数量" />
          <el-table-column prop="numFinish" label="已完成的图片数量" />
          <el-table-column prop="createTime" label="创建任务的时间" />
          <el-table-column prop="finishTime" label="完成时间" />
          <el-table-column prop="numChecked" label="已审核通过的图片数量" />
          <!--0未完成/1完成部分/2等待审核/3审核通过/4审核不通过-->
          <el-table-column prop="status" label="审核状态" />
          <!--          <el-table-column prop="markTaskId" label="markTaskId" />-->
          <!--          <el-table-column v-if="checkPer(['admin','taskMark:edit','taskMark:del'])" label="操作" width="150px" align="center">-->
          <!--            <template slot-scope="scope">-->
          <!--              <udOperation-->
          <!--                :data="scope.row"-->
          <!--                :permission="permission"-->
          <!--              />-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-col>

      <el-col :xs="10" :sm="6" :md="5" :lg="4" :xl="8">
        <div class="head-container">
          <h2>文件树</h2>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getUser, getUserQuery } from '@/api/system/user'
import crudTaskMark from '@/api/system/taskMark'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { taskName: null, fileList: null, numImage: null, numFinish: null, createTime: null, finishTime: null, numChecked: null, status: null, markTaskId: null }
export default {
  name: 'Taskcheck',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: 'api/taskMark', url: 'api/taskMark', idField: 'markTaskId', sort: 'markTaskId,desc', crudMethod: { ...crudTaskMark }})
  },
  data() {
    return {
      allUsers: [],
      allUsersNames: [],
      allTaskMarks: [],
      userIdchoosed: null,
      permission: {
        add: ['admin', 'taskMark:add'],
        edit: ['admin', 'taskMark:edit'],
        del: ['admin', 'taskMark:del']
      },
      rules: {
      },
      queryTypeOptions: [
        { key: 'taskName', display_name: '任务名' },
        { key: 'numImage', display_name: 'file_list中所含有的图片数量' }
      ]
    }
  },
  created() {
    this.getAllUser()
  },
  methods: {
    getAllUser() {
      getUser().then(res => {
        // console.log(res.content)
        for (const c of res.content) {
          const u = { id: '', username: '' }
          u.id = c.id
          u.username = c.username
          this.allUsersNames.push(c.username)
          this.allUsers.push(u)
        }
        // console.log(this.allUsers)
      }
      )
    },
    clickTr(row, event, column) {
      this.userIdchoosed = row.id
      getUserQuery(row.id).then(res => {
        this.allTaskMarks = res[0].taskMarks
        console.log(row)
      })
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }
  }
}
</script>

<style scoped>

</style>

